/**
 * 设置全流程监控参数
 */

import { FC, useEffect} from "react"
import {  Form, Input, message, Modal } from "antd"
import { IMonitorType, postSetAllMonitor } from "../../api"
import { useWindowFontSize } from "../../../../../assets/fun/Antd/configprovider"


const AllMonitorSet: FC<{
    listData?: IMonitorType
    handleCallBack: () => void
    addShow:boolean
}> = ({
    listData, handleCallBack,addShow
}) => {
        const [form] = Form.useForm();
        const { validateFields, resetFields, setFieldsValue } = form;
        const handleOk = async () => {
            const values = await validateFields();
            const { code, msg } = (await postSetAllMonitor({
                ...values,
                id: listData?.id,
            })) as {
                code: number
                msg: string
            }
            if (code === 20000) {
                message.success("设置成功")
                resetFields()
                handleCallBack()
            } else {
                message.error(msg)
            }

        }

        const handleCancel = async () => {
            handleCallBack()
        }

        useEffect(() => {
            if (listData) {
                setFieldsValue(listData)
            }
        }, [listData, setFieldsValue])

        return (
            <>
                <Modal
                    width={useWindowFontSize(520)}
                    title={"设置全流程监控参数"}
                    open={addShow}
                    onOk={handleOk}
                    onCancel={handleCancel}
                    getContainer={false}
                    >
                    <Form form={form}
                        labelCol={{ span: 8 }}
                        wrapperCol={{ span: 16 }}
                        labelAlign="left"
                    >
                        <Form.Item
                            label="RTSP地址"
                            name="rtspAddress"
                            rules={[{ required: true, message: "请填写RTSP地址!" }]}
                        >
                            <Input
                                placeholder="请填写RTSP地址"
                            />
                        </Form.Item>
                        <Form.Item
                            label="通道号"
                            name="channelNum"
                            rules={[{ required: true, message: "请填写通道号" }]}
                        >
                            <Input
                                type="number"
                                placeholder="请填写通道号"
                            />
                        </Form.Item>
                        <Form.Item
                            label="截取录像前(秒)"
                            name="clipVideoBefore"
                            rules={[{ required: true, message: "请填写截取录像前秒数!" },
                                //要求秒数大于0且小于1000
                                ({ getFieldValue }) => ({
                                    validator(_, value) {
                                        if (value < 0 || value > 1000) {
                                            return Promise.reject(new Error("截取录像前秒数要求大于0且小于1000"));
                                        }
                                        return Promise.resolve();
                                    },
                                }),
                            ]}
                        >
                            <Input
                                type="number"
                                placeholder="请填写截取录像前秒数"
                            />
                        </Form.Item>
                        <Form.Item
                            label="截取录像后(秒)"
                            name="clipVideoAfter"
                            rules={[{ required: true, message: "请填写截取录像后秒数!" },
                                ({ getFieldValue }) => ({
                                    validator(_, value) {
                                        if (value < 0 || value > 1000) {
                                            return Promise.reject(new Error("截取录像前秒数要求大于0且小于1000"));
                                        }
                                        return Promise.resolve();
                                    },
                                }),
                            ]}
                        >
                            <Input
                                type="number"
                                placeholder="请填写截取录像后秒数"
                            />
                        </Form.Item>
                        <Form.Item
                            label="存储位置"
                            name="saveLocation"
                            rules={[{ required: true, message: "请填写存储位置!" }]}
                        >
                            <Input
                                placeholder="请填写存储位置"
                            />
                        </Form.Item>
                    </Form>
                </Modal>
            </>
        )
    }

export default AllMonitorSet